<template>
  <div id="HousingResource">
    <div class="content">
      <div class="overflow-auto">
        <div class="HousingResource_table">
          <el-radio-group size="small" v-model="tabelType" @change="changeType">
            <el-radio-button label="0">全部</el-radio-button>
            <el-radio-button label="1">已上架</el-radio-button>
            <el-radio-button label="2">未上架</el-radio-button>
          </el-radio-group>
          <div class="table" :style="{ 'height': maxHeight + 'px' }">
            <el-table :data="tableData_room" :max-height="maxHeight_table" :key="tableKey"
              :header-cell-style="{ background: '#f6f8ff', color: '#303133', fontWeight: '400' }" style="width: 100%">
              <el-table-column prop="channel_room_title" align="center" header-align="center" label="小程序房型名称">
              </el-table-column>
              <el-table-column prop="room_title" align="center" header-align="center" label="本地房型名称">
              </el-table-column>
              <el-table-column prop="status" align="center" header-align="center" label="状态">
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.status == 0 ? '未上架' : '已上架' }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="operate" align="center" header-align="center" label="操作">
                <template slot-scope="scope">
                  <div>
                    <!-- 当房源状态为未上架时，显示 上架、 为已上架时，显示下架 -->
                    <el-button size="mini" type="text" @click="action(scope.row)">{{ scope.row.status == 0 ? '上架' : '下架'
                    }}</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <!-- <div class="paginationCom">
              <pagination :data="pageNation_data" @size-change="handleSizeChange" @current-change="handleCurrentChange">
              </pagination>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from '../../../../components/PaginationPage/Pagination.vue'

export default {
  name: 'HousingResource',
  components: {
    // Pagination,
  },
  data() {
    return {
      tabelType: 0,//表格类型  单选按钮组
      tableData_room: [],
      tableKey: false,
      maxHeight: window.innerHeight - 160,//表格最大 高度
      maxHeight_table: window.innerHeight - 210,//表格最大 高度

      pageNation_data: {
        total: 0,
        currentPage: 1,
        currentSize: 10,
        small: false
      },// 传递分页组件的数据
    }
  },
  mounted() {
    // 监听窗口大小变化
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    // 移除窗口大小变化的监听
    window.removeEventListener('resize', this.handleResize);
  },
  created() {
    this.getChannel()
  },
  methods: {
    // handleSizeChange(val) {
    //   // 处理每页数量改变的逻辑
    //   console.log(`每页 ${val} 条`);
    //   this.pageNation_data.currentSize = val
    //   this.getChannel()
    // },
    // handleCurrentChange(val) {
    //   // 处理当前页码改变的逻辑
    //   console.log(`当前页: ${val}`);
    //   this.pageNation_data.currentPage = val
    //   this.getChannel()
    // },

    // 表格操作上下架
    action(row) {
      let data = {
        id: row.id
      }
      console.log(data, '表格操作上下架数据row');
      this.my_request('supplier/setting/room/status', data, 'PUT').then(res => {
        console.log(res, '表格操作上下架结果');
        let { code } = res.data
        if (200 == code) {
          this.$message.success('操作成功！')
          this.getChannel()
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    // 获取不同屏幕大小表格的最大高度
    handleResize() {
      // 在这里处理窗口大小变化的逻辑
      let screenHeight = window.innerHeight;

      this.maxHeight = screenHeight - 160
      this.maxHeight_table = screenHeight - 210
      console.log(this.maxHeight, ' this.maxHeight', window.innerHeight);
    },

    // 单选按钮发生变化事件
    changeType() {
      console.log(this.tabelType, '表格筛选发生变化事件');
      this.getChannel()
    },

    // 获取渠道房源
    getChannel() {
      let data = {
        hotel_id: sessionStorage.getItem('hotel_id'),//当前酒店id
        channel_id: 2,
        // page: this.pageNation_data.currentPage,
        // page_rows: 2,
      }
      this.my_request("/supplier/hotel-pms-channel/list", data, "GET").then(res => {
        console.log(res, '获取渠道房源结果');
        let { code, data } = res.data
        if (200 == code) {
          this.tableData_room = data.list.filter(item => {
            return item.room_id != 0
          })
          if (this.tabelType == 0) {
            this.tableData_room = this.tableData_room
          }
          else if (this.tabelType == 1) {//已上架
            this.tableData_room = this.tableData_room.filter(item => {
              return item.status == 1
            })
          }
          else if (this.tabelType == 2) {//未上架
            this.tableData_room = this.tableData_room.filter(item => {
              return item.status == 0
            })
          }
          // this.pageNation_data.total = this.tableData_room.length
          this.tableKey = !this.tableKey
          console.log(this.tableData_room, 'this.tableData_room');
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.table {
  position: relative;

  .paginationCom {
    position: absolute;
    bottom: 0;
    right: 15px;
  }
}

::v-deep .el-tabs--card>.el-tabs__header .el-tabs__nav .is-top {
  background-color: white;
}

.content {
  .overflow-auto {
    width: calc(100% - 190px);
    height: calc(100% - 40px);
    overflow: auto;
    padding: 20px;

    .HousingResource_table {
      width: 100%;
    }
  }

  .table {
    margin: 20px 0 !important;
    background-color: white;
  }
}
</style>